<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=request.getContextPath() %>\">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人中心</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-family: "microsoft yahei";
				font-size: 14px;
				color: #333;
				background: #f7f7f7;
			}
			a{
				color: #767676;
				text-decoration: none;
			}
			.my-main{
				width: 1140px;
				margin: 20px auto;
				border: 0px solid red;
			}
			/*左边导航栏*/
			.leftNav{
				width: 160px;
				height: 700px;
				float: left;
				background: #fff;
				padding-right: 15px;
				padding-left: 15px;
			}
			.my-menu dt{
				padding: 16px 15px;
				font-weight: 700;
				
			}
			.my-menu dd{
				border-bottom: 1px solid #d5d5d5;
			}
			.my-menu dd .nav{
				list-style: none;
			}
			.my-menu dd .nav li a{
				border-radius: 2px;
				display: block;
				padding: 15px 15px;
			}
			.my-menu .mm-root a{
				color: #da2a2a;
				font-size: 18px;
				font-weight: 500;
			}
			/*右边内容*/
			.my-page{
				margin-left: 20px;
				padding: 20px;
				width: 880px;
				height: 660px;
				background: #fff;
			}
			.col-xs-10{
				float: left;
				position: relative;
				min-height: 1px;
			}
			.my-page .page-pull{
				margin: 0 0 15px;
				padding-bottom: 9px;
				border-bottom: 1px solid #eee;
			}
			.page-pull h1{
				font-size: 22px;
				font-weight: 500;
				margin-left: 20px;
			}
			.h1{
				font-family: inherit;
				font-weight: 500;
				line-height: 1.1;
				color: inherit;
			}
			.my-main.my-page.clearfix{
				height: 40px;
			}
			.my-main.page-pull{
				margin: 0 0 20px;
			}
			.clearfix{
				zoom: 1;
			}
			.page-pull{
				border-bottom: 1px solid #eee;
			}
			.userINfoForm{
				width: 890px;
				border: 1px solid#e8e8e;
				border-top: none;
				display: block;
				padding: 33px 0;
				font-size: 14px;
			}
			.userINfoForm.item.laberl{
				width: 75px;
			}
			.f-left{
				font-size: 18px;
				margin-left:106px;
			}
			.f-right{
				font-size: 18px;
				margin-left: 305px;
				margin-top:-23px;
			}
			.f-right-1{
				font-size: 18px;
				margin-top:-23px;
			}
			.f-right-2{
				font-size: 18px;
				margin-right: 315px;
				float:right;
			}
			.f-right-22{
				font-size: 18px;
				margin-left:196px;
				float:left;
			}
			.userINfoForm.item.content{
				margin-left: 48px;
			}
			.userINfoForm.item.w-avator{
				width: 75px;
				height: 75px;
				border-radius: 50%;
				margin: 0 auto;
				position: relative;
				cursor: pointer;
			}
			.my-main img{
				padding-left: 203px;
				margin-top: -58px;
			}
			.userINfoForm.item.w-avator.modifyAvatar{
				width: 28px;
				height: 25px;
				position: absolute;
				bottom: 7px;
				right: 10px;
				z-index: 3;
			}
			.icon-normal-camera{
				background-position: 0-481px;
			}
			.userINfoForm.item.w-avator.mask{
				width: 78px;
				height: 78px;
				position: absolute;
				z-index: 2;
				background: url(imgs/1549513473078.jpeg);
			}
			.u{
				margin-left: 2px;
			}
	
			.w-ipt{
				border: 1px solid#ddd;
				padding-left: 9px;
			}
			.userINfoForm.item.errorMsg{
				margin-left: 8px;
				margin-top: 9px;
			}
			.w-errorMsg{
				float: left;
				text-align: left;
				display: none;
			}
			.userINfoForm.item.errorMsg.icon{
				margin-right: 3px;
			}
			.w-errorMsg.icon,.w-errorMsg.text{
				float: left;
			}
			.icon-normal-disable{
				background-position: 0-1056px;
				height: 16px;
				width: 16px;
			}
			i{
				font-style: normal;
			}
			.w-errorMsg.text{
				overflow: hidden;
				color: #d4282d;
				line-height: 16px;
			}
			.w-errorMsg.icon,.w-errorMsg.text{
				float: left;
			}
			.w-radio.s-gold-new>input,.w-radio.s-gold>input,.w-radio>input{
				width: 15px;
				height: 15p;
			}
			.w-radio.s-gold>input{
				background-position: 0-212px;
			}
			.ml{
				margin-left: 380px;
			}
			.mr{
				margin-right: 20px;
			}
			.w-link,.w-link:hover{
				color: #69c;
			}
			.pad4{
				padding: 4px 0;
			}
			.w-select-s{
				line-height: 34px;
				width: 70px;
			}
			.w-select{
				border: 1px solid#ddd;
				background-color: #fff;
			}
			.w-ipt,.w-select{
				height: 28px;
				color: #333;
			}
			.userINfoForm.item.unita{
				margin: 0 20px 0 6px;
				vertical-align: middle;
			}
			.userINfoForm.mo-item.w-button{
				border-color: #ddd;
				float: left;
				letter-spacing: normal;
				text-align: center;
				border-radius: 2px;
				cursor: pointer;
			}
			.w-button-1{
				width: 126px;
				height:38px;
				line-height: 35px;
				text-align: center;
				font-size: 16px;
			}
			.w-button-primary{
				color: #fff;
				border: 1px solid #2f973f;
				background-color:#2f973f;
			}
			.userINfoForm.splitLine{
				margin-left: 50px;
				margin-right: 50px;
				border-bottom: 1px dashed#e8e8e8;
				padding-top:19px ;
				margin-bottom: 23px;
			}
			.item{
				height: 77px;
			}
			.userINfoForm.item{
				margin-left: 60px;
				margin-bottom: 22px;
				height: 35px;
				line-height: 34px;
				clear: both;
			}
			.my-main:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			.row:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			.my-header{
				margin-bottom: 75px
			}
			.my-header:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}			
			.my-footer:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			.head{
				display: inline-block;
				width:70px;
				height:70px;
				opacity:0;
				position: relative;
				top:-53px;
				left:-74px;
			}
		/*修改弹出层*/
			.mima{
			display:block:none;
				width: 102%;
				height: 150%;
				position: fixed;
				top: -34px;
				z-index: 99999;
				background-color: rgba(0,0,0,0.3);
				margin-left:-342px;
			}
			.xiugai{
				width: 50%;
				height: 500px;
				margin:80px auto;
				background-color: #fff;
			}
			.xiugai .guanbi{
				margin-bottom: 10px;
			}
			.xiugai .guanbi:after{
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
			}
			.xiugai .guanbi .gbtitle{
				float: left;
				padding: 0px 35px;
				margin-top: 23px;
    			margin-left: -1px;
			}
			.xiugai .guanbi .gbtitle h3{
				font-weight: 550;
			}
			.xiugai .guanbi .gbtitle small{
				font-size: 12px;
			}
			.xiugai .guanbi .gbimg{
				float: right;
				padding: 14px 419px;
			}
			.xiugai .guanbi .gbimg img{
				width: 28px;
				height: 30px;
			}
			.text-danger{
				color: red;
			}
			.form-group1{
				margin-bottom: 28px;
			}
			.form-group1:after{
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
			}
			.form-group2{
				margin-bottom: 28px;
			}
			.form-group2:after{
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
			}
			.juzhong{
				width: 80%;
				margin: 0 auto;
			}
			.control-label{
				padding-top: 7px;
				text-align: right;
				margin-left:29px;
			}
			.form-control{
				width: 90%;
				height: 18px;
				padding: 10px 13px;
				border: 1px solid #ccc;
				border-radius: 2px;
				margin-left:49px;
			}
			.col-xs-7{
				width: 58.33333333%;
				float: left;
			}
			.col-xs-2{
				width:16.66666667%;
				float: left;
			}
			.checkbox{
				margin-top:48px;
				margin-left:-11px;
			}
			.col-xs-5{
				margin-left: 18%;
			}
			.dzbtnbc{
				padding: 5px 28px;
				font-size: 18px;
				color: #fff;
				background-color: #2f973f;
				border-color: #2f973f;
				border: 1px solid transparent;
				margin-left: 121px;
				margin-top: 66px;
			}
			.chongfuselect{
				position: fixed;
				top: 206px;
				left: 632px;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
				width: 160px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-radius: 5px;
				font-size: 14px;
				z-index: 9999999;
				display: none;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				//图片回显
				$(".head").bind("change",function(){
					var read=new FileReader()
					var $input=$(this);
					read.readAsDataURL(this.files[0]);
					read.onload=function(){
					url=read.result // 拿到读取结果;
					 //DOM元素，不能是JQ对象
					$("#imghead").attr("src",url);
					}
				})
				xiugai();
			 	var tips=$("#tips").val();
				if(tips==1){
					$(".mima").css("display","block");
					$(".chongfuselect").text("原密码验证错误");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				}
				if(tips==2){
					$(".mima").css("display","block");
					$(".chongfuselect").text("两次密码填写不一致");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
				}
				if(tips==-1){
					$(".chongfuselect").text("修改成功");
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
					
				}
			})
			
			//修改密码按钮操作
			function xiugai(){
				$(".gbimg").click(function(){
				$(".mima").css("display","none");
			})
				$(".f-right-22").click(function(){
				$(".mima").css("display","block");
			})	
		//	baocunxiugai();
		}
			//手机号码验证	
			function isPhoneNo(phone) {
				var pattern =/^1[3-9]+\d{9}$/;
				return pattern.test(phone);
			}
			
		
		
		</script>
</head>
	<body>
		<div class="chongfuselect">
			<p>该订单状态无法取消</p>
		</div>
		<input type="hidden" id="tips" value="${param.tips}" />
			<div class="my-header">
				<jsp:include page="include/header.jsp"></jsp:include>
			</div>
			<div class="my-main">
			<div class="row">
				<div class="leftNav">
					<dl class="my-menu">
						<dt class="mm-root">
							<a href="/member.html">会员中心</a>
						</dt>
						<dd></dd>
						<dt>交易</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="dingdan">我的订单</a>
								</li>
								
								<li>
									<a href="gwc">我的购物车</a>
								</li>
							</ul>
						</dd>
						<dt>购物</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="address">我的收货地址</a>
								</li>
							</ul>
						</dd>
						<dt>账户</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="huiyuan">个人信息</a>
								</li>
							</ul>
						</dd>
					</dl>
				</div>
				<div class="col-xs-10 my-page">
					<div class="page-pull clearfix">
						<h1 class="pull-left">
							我的个人信息
						<small>My Setting</small>
						</h1>
						</div>
						<form class="userINfoForm" method="post" action="huiyuan?v=updatauses"  enctype="multipart/form-data">
							<div class="item useravator">
								<label class="laberl f-left">用户头像</label>
								<div class="content f-left">
									<div class="w-avator" id="preview">
									<img id="imghead" border="0"  width= "75px"; height="75px;" margin-top="-44px;"  src="${empty user.uimg?'imgs/liuimgs/photo_icon.png':user.uimg}" >
									<input type="file" name="uphead" class="head" />
									</div>
									<div class="modifyAvatar w-icon-normal icon-normal"></div>
									<div class="mask"></div>						
							</div>
						</div>
						<div class="item">
							<label class="laberl f-left userID">
								<span>用</span>
								<span class="u">户</span>
								<span class="u">ID</span>
							</label>
							<div class="content f-right">${user.uid}</div>
						</div>
						<div class="item">
							<label class="label f-left">
								<span>账</span>
								<span class="u">号</span>
							</label>
							<div class="content f-right">${user.uphone}</div>
						</div>
						<div class="item">
							<label class="label f-left">
								<span>昵</span>
								<span class="u">称</span>
							</label>
							<div class="content f-right">
								<input name="nc" value="${empty user.uname?'':user.uname}" class="w-ipt w-ipt-1" type="text" maxlength="20"  />
							</div>
							
						</div>
						<div class="item">
							<label class="label f-left">
									<span>性</span>
								<span class="u">别</span>
							</label>
							<div class="w-radio f-right s-gold">
								<input ${'女'==user.usex?"":"checked"} name="sex" class="radio" id="male" type="radio" value="男"/>
								<label class="u" for="male">男</label>
							</div>
								<div class="w-radio f-right-1 ml s-gold">
								<input ${'男'==user.usex?"":"checked"} name="sex" class="radio" id="female" type="radio" value="女"/>
								<label class="u" for="female">女</label>
							</div>
						</div>
						<div class="item">
							<label class="label f-left">
								<span>手</span>
								<span class="u">机</span>
								<span class="u">号</span>
								<span class="u">码</span>
							</label>
							<div class="content f-right">
								<input name="sjh" value="${empty user.uphone?'':user.uphone}"  id=txt class="w-ipt w-ipt-1 sjh" type="text" maxlength="20" />
							</div>						
						</div>
							<div class="item">									
									<div class="content f-right-2">
									<input type="submit" value="保存" class="w-button w-button-primary w-button-1 bc"> 						
									</div>
									
										<div class="content f-right-22">								
										<div class="w-button w-button-primary w-button-1">修改密码</div>	
									</div>						
							</div>

						</form>
					<form action="huiyuan?v=xiugai" method="post">
							<div class="mima" style="display:none;">
								<div class="xiugai">
									<div class="guanbi">
										<div class="gbtitle">
											<h3>修改密码
												<small>My Password</small>
											</h3>
												<div class="gbimg">
													<img src="imgs/liuimgs/dzgb.png" />
												</div>
										</div>
									</div>
										<div class="juzhong">	
												<div class="form-group1">
													<label class="col-xs-2 control-label">原密码：
														<span class="text-danger">*</span>
													</label>
													<div class="col-xs-7">
														<input type="password" ${user.upwd} class="form-control" name="password1" placeholder="原密码"/>
													</div>										
												</div>
												<div class="form-group2">
													<label class="col-xs-2 control-label">修改密码
														<span class="text-danger">*</span>
													</label>
													<div class="col-xs-7">
														<input type="password" class="form-control" name="password2" placeholder="修改密码"/>
													</div>	
												</div>
												<div class="form-group">
													<label class="col-xs-2 control-label">确认密码
														<span class="text-danger">*</span>
													</label>
													<div class="col-xs-7">
														<input type="password" class="form-control" name="password3" placeholder="确认密码"/>
													</div>	
												</div>
											<div class="form-group">
												<div class="col-xs-5 ">
													<div class="checkbox">
														<input type="submit" class="dzbtnbc" value="保存修改">
													</div>
												</div>
											</div>			
									</div>
								</div>
							</div>
						</form>
						</div>
					</div>
				</div>
		<div class="my-footer">
				<jsp:include page="include/footer.jsp"></jsp:include>
		</div>
</body>
</html>